<script setup>
/*
vue2路由跳转
template跳转
   <router-link to="/">home</router-link>
   <router-link :to="{path:'/'}">home</router-link>
script跳转
   最常规：
     this.$router.push('/home')
  特别跳转：
     前进
     this.$router.go(1)
     this.$router.forward()
     刷新：
     this.$router.go(0)
     后退
     this.$router.go(-1)
     this.$router.back()

     替换历史记录
     this.$router.replace('/xxx')  /xxx替换当前路由的历史记录

  vue3
    import {useRouter,useRoute} from 'vue-router'
    const router=useRouter()   ===== this.$router
    const route=useRoute()     ===== this.$route
*/
import { useRouter, useRoute } from 'vue-router'
const router = useRouter() // router===this.$router
const route = useRoute() // route===this.$route
const goAbout = () => {
  console.log('route', route)
  router.push('/about')
}
</script>

<template>
  <div class="app-page">app</div>
  <router-link to="/">home</router-link>
  <br />
  <router-link to="/about">about</router-link>
  <br />
  <button @click="$router.push('/login')">跳转到login页</button>
  <button @click="$router.replace('/')">跳转到home页</button>
  <button @click="$router.go(-1)">后退</button>
  <hr />
  <button @click="goAbout">跳转到about页面</button>
  <router-view></router-view>
</template>

<style scoped></style>
